<template >
<view class="container">
    <swiper v-if="bannerList.length" class="banner" indicatorDots="true" autoplay="true" interval="2200" duration="1000" circular indicatorActiveColor='#FD6D1F'>
    <swiper-item v-for="item of  bannerList" :key="item.id">
      
        <img @click="toBanner(item)" :src="item.advertImg"/>
     
      
      
    </swiper-item>
  </swiper>
    <div class="box">
        <ul>
          <li :class='{color:index==thisclick}' @click='clickAge(index,val.val)'  v-for="(val,index) in age" :key='index'>
              {{val.text}}
          </li>
        </ul>
    </div>
    <div class="factory">
      <div v-if='StoreList' class="title">
        <navigator  hover-class="none" :url=" '/pages/ucenter/manufacturerList?title='+vtitle ">
        <span>
          <img :src="StoreList.storeAvatar" alt="">
          {{StoreList.storeName}}
        </span>
        
        <span>更多厂家<img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;" class="goRight" src="/static/images/go.png"/></span>
        </navigator>
      </div>
       <scroll-view  scroll-x    class="list"  >
              
                  <div class="li" v-for='(list,listindex) in StoreList.productList' :key='listindex'>
                     <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + list.productId+'&img='+ list.productThumb">
                    <div>
                        <img  :src="list.productThumb" alt="">
                        <p>￥{{list.price}}</p>
                    </div>
                     </navigator>
                  </div>
              
            </scroll-view>
    </div>
<!-- ageGroup -->
  <div class="select">
   <ul>
                         <li    v-for="(item,index) in items" :key="index"> 
                             <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                            <div   class='pic'>
                                                <img style="width:44vw;height:44vw" :src="item.productThumb" alt="">
                                            </div>
                                    <div class='bottom'>
                                        <p style="text-indent: 0;"  >{{item.productName }}</p>
                                        <p class='MBprice'> <span>￥{{item.price}} </span> <span>{{item.orderCount}}人已付款</span> </p>
                                            
                                </div>
                             </navigator>
                            </li>
              
                    </ul>
       </div>             
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'

export default {
  data () {
    return {
      typeId: 0,
      collectList: [],
      items:[],
      age:[
        {'text': '全部','val':''},
        {'text': '婴童','val':1},
        {'text':'男小童','val':6},
        {'text':'女小童','val':2},
        {'text':'男中童','val':7},
        {'text':'女中童','val':3},
        {'text':'男大童','val':4},
        {'text':'女大童','val':8}
        ],
      page:1,
      loadingBt:false,
      nothing:false,
      vtitle:'',
      bannerList:[],
      thisclick:0,
      ageGroup:'',
      StoreList:''
    }
  },
  onShow(){
    this.vtitle= this.$route.query.title 
      wx.setNavigationBarTitle({
            title: this.vtitle,
          }) 
      this.TPStoreList();
      this.home();
  },
  async mounted () {
    await Promise.all([
      this.DayDayProduct()
    ])
  },
  onUnload(){
    this.items=[]
    this.page=1;
    this.vtitle='';
    this.bannerList=[];
    this.ageGroup='';
  },
   onReachBottom(){
        
    if(this.loadingBt){
       this.DayDayProduct()
    }
  
  },
  methods: {
   clickAge(index,val){
     if(index!=this.thisclick){
        this.thisclick=index;
        this.ageGroup=val;
        this.items=[]
          this.DayDayProduct();
        this.TPStoreList();
    }
    
   
   } ,
     toBanner(item){
        console.log(item.linkUrl.slice(0,7))
        if(item.linkUrl.slice(0,7)=='StoreId'){
                 wx.navigateTo({
              url: '/pages/merchants/merchants?storeId=' + item.linkUrl.split('=')[1]
            });
        }
       
  },
    // 获取我的收藏信息
  async  DayDayProduct(){
  
             let data=JSON.stringify({ 'ageGroup':this.ageGroup, "pageIndex":this.page, "pageSize":"10", 'ageGroup':parseInt(this.$route.query.age) +1})
               let res 
              if(this.vtitle=='童品汇'){
                  res = await api.TPBestProduct({"data":data});
              }else{
                  res = await api.WPBestProduct({"data":data});
                
   }
            
           this.items = this.items.concat(res.data);
                   if (res.data.length == 10) {
                        this.page++;
                        this.loadingBt=true;
                    }else{
                        this.loadingBt=false;
                    }
              

    },
 async TPStoreList(){

   let data=JSON.stringify({"pageIndex":1, "pageSize":"10",'ageGroup':this.ageGroup})
    let   res ;
   if(this.vtitle=='童品汇'){
      res = await api.TPStoreList({"data":data});
   }else{
      res = await api.WPStoreList({"data":data});
     
   }
       
      
          this.StoreList=res.data[1]
          console.log(this.StoreList,5555)
 } ,  
  async home(){// banner
  let type
  if(this.vtitle=='童品汇'){
    type=312
  }else{
    type=314
  }
    let data=JSON.stringify({  "type":type})
      let   res = await api.BestBanner({"data":data});
              this.bannerList=res.data
              
  },
 
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/ucenter/collect'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    background: #f4f4f4;
    min-height: 100%;
}

.container{
    background: #f4f4f4;
    min-height: 100vw;
    background: #f7f7f7;
    overflow: hidden;
}
.factory{
  
  .title{
    height: 36px;;
    padding-top:15px;
    padding-bottom:17px;
    background: #fff;
    span:nth-child(1){
      color: #333333;
      font-size: 15px;
      line-height: 36px;
      padding-left: 15px;
      float: left;
      img{
         padding-right: 10px;
        float: left;
        height: 36px;;
        width: 36px;;
      }
    }
    span:nth-child(2){
      font-size: 13px;
      line-height: 36px;
      float: right;
    }
  }
}
.box{
  
  height: 70px;;
  width: 100vw;
  color: #333333;
  .color{
    color: #FD6D1F;
  }
  li{
    text-align: center;
    background: #fff;
    font-size: 15px;
    line-height: 35px;;
    float: left;
    width:25% ;
    height: 35px;;
    box-sizing: border-box;
    border-right: 1px solid #f7f7f7;
    border-bottom:1px solid #f7f7f7;
  }
}
  .banner {
  width: 100vw;
  height:43vw;
  img{
    width: 100%;;
    height:43vw;
  }
}
.list{
  
  display: flex;
  white-space: nowrap;
  height: 140px;;
  padding-left: 15px;
  width: 360px;

  background: #fff;

      .li{
        display: inline-block;
        background: #fff;
        margin-right: 13px;
        img{
          height: 100px;
          width:100px;;
        }
      }
      p{
        text-align: center;
        font-size: 14px;
        color: #333333;
        line-height: 30px;
      }
   
}
.select{

    .title{
        text-indent: 15px;
           height: 55px;
            color: #333333;
            font-size: 14px;
            line-height: 55px;
            background: #fff;
            margin-bottom: 15px;
    }
 
 ul {
 
  font-size: 0;
  li {
    width: 44vw;
    margin-left: 4vw;
    margin-top:4vw;
    display: inline-block;
    background-color: #fff;
    // background:rgba(255,209,232,1);
box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.11);
    .bottom {
      width: 90%;
      margin: 0 auto;

    
    .pic {
      width: 48vw;
      height: 48vw;
    }
        p:nth-child(1) {
        color: #000;
        font-size: 12px;
        line-height: 14px;
          overflow: hidden;
          height: 28px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
            margin-bottom: 6px;
            margin-top:8px;
        }

  }     
  .MBprice{
      padding-bottom: 9px;
    
      span:nth-child(1){
          color: #FD6D1F;
          font-size: 14px;

      }
       span:nth-child(2){
          color: #333333;
          font-size: 12px;
         float:right;
      }
  }
  
  }
}
}
</style>
